<template>
  <div>
    <div class='foot'>
      <div class="foot-left">
        <ul>
          <li>账号设置</li>
          <li><el-link type="info">实名认证</el-link></li>
          <li><el-link type="info">交易设置</el-link></li>
          <li><el-link type="info">交易防骗指南</el-link></li>
        </ul>
        <ul>
          <li>钱包相关</li>
          <li><el-link type="info">收费标准</el-link></li>
          <li><el-link type="info">充值提现</el-link></li>
          <li></li>
        </ul>
        <ul>
          <li>交易相关</li>
          <li><el-link type="info">交易报价原因失败汇总</el-link></li>
          <li><el-link type="info">FAQ</el-link></li>
          <li><el-link type="info">什么是交易暂挂</el-link></li>
          <li><el-link type="info">新手常见问题</el-link></li>
        </ul>
        <ul>
          <li>便捷支付</li>
          <li><el-link type="info" disabled>银行卡支付</el-link></li>
          <li><el-link type="info" disabled>支付宝支付</el-link></li>
          <li><el-link type="info" disabled>微信支付</el-link></li>
        </ul>
      </div>
      <div class="foot-right">
          <img src="../assets/img/test.jpg" alt="">
          <span><el-link type="info" disabled>没东西 随便凑一下</el-link></span>
      </div>
    </div>
    <div class="foot-footr">
      <div>
      <span>网易公司版权所有 ©1997-2021</span> <a href="javascript:;">网易BUFF隐私政策及儿童个人信息保护规则</a> <a href="javascript:;">CP备案：粤B2-20090191-18I</a></div>
    </div>
  </div>
</template>

<script>
  export default{

  }
</script>

<style>
  .foot{
    background-image: linear-gradient(to right, #392541, #79484b, #4e2140);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
  }
  .foot-left{
    width: 70%;
    height: 200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 2rem;
  }
  .foot-right{
    width: 30%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  /* 导航标题设置 */
  .foot-left ul{
    display: block;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2rem;
  }.foot-left ul li{
    display: inline;
  }
  .foot-left ul li:first-child{
    font-size: large;
    color: white;
    border-bottom: #ffffff solid 0.2rem;
    margin-bottom: 0.3125rem;
  }
  .foot-left ul li span{
    font-size: x-small;
  }
  /* 右侧*/
  .foot-right img{
    width: 20%;
  }
  /* 底部 */
  .foot-footr{
    background-image: linear-gradient(to right, #392541, #79484b, #4e2140);
    width: 100%;

    padding: 1rem 2rem;
  }
  .foot-footr,.foot-footr div{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .foot-footr div{
     border-top:0.125rem solid wheat ;
     width: 80%;
  }
  .foot-footr a{
    padding-left: 0.8rem;
    color: #000000;
    text-decoration: none;
  }
  .foot-footr a:hover{
    color: white;
  }
  .foot-footr a,.foot-footr span{
    font-size: small;
  }
</style>
